import React from "react"

class SearchCom extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      value: '',
      result: null,
      triangle: {
        margin: '10px auto',
        height: 0,
        width: 0,
        'borderTop': '30px solid red',
        'borderRight': '30px solid green',
        'borderBottom': '30px solid yellow',
        'borderLeft': '30px solid blue'
      }
    }
  }
  render () {
    return (
      <div>
        <input type="text" placeholder="请输入查询的省份" onKeyDown={this.searchEvent} onChange={this.changeEvent} value={this.state.value} />
        <div>
          <h2>查询结果:</h2>
          <div>
            { this.state.result }
          </div>
        </div>
        <div style={this.state.triangle}></div>
      </div>
    )
  }
  searchEvent = (e) => {
    if (e.code !== 'Enter') return
    console.log(this.props.citiesObj)
    console.log(this.props.citiesObj[this.state.value])
    const cityItem = this.props.citiesObj[this.state.value]
    this.setState({
      result: !cityItem ? null : (
        <div>
          <p>确诊人数: {cityItem.confirm}</p>
          <p>死亡人数: {cityItem.dead}</p>
          <p>康复人数: {cityItem.heal}</p>
          <p>境外输入: {cityItem.input}</p>
        </div>
      )
    })

  }
  changeEvent = (e) => {
    console.log(e.nativeEvent.data)
    this.setState({
      value: e.nativeEvent.data
    })
  }
}

export default SearchCom
